import React, { useRef, useContext } from 'react';
import getCssPrefix from '../../../lib/getCssPrefix';
import getScrollBarSize from '@root/lib/getScrollBarSize';
import BaseScrollBar from './BaseScrollBar';
import TableContext from '@root/lib/TableContext';
import useBarStyle from './hooks/useBarStyle';
const { size: scrollSize, scrollBarType } = getScrollBarSize();
const { cssPrefix } = getCssPrefix();

function SimulateScrollBar(props) {
    const { leftBarWidth, rightBarWidth, width, scrollyVisible, setScrollVisible } = props;
    const barRef = useRef(null);
    const { modifyState, scrollUtility } = useContext(TableContext);
    const needSpacer = scrollyVisible && width && !rightBarWidth;
    const rightBarWidthPlus = scrollyVisible && scrollBarType === 'occupy' ? scrollSize : 0;
    const { barStyle, setBarVisible } = useBarStyle(setScrollVisible, scrollBarType);
    return (
        <div className={`${cssPrefix}-simulate-scroll-bar`} ref={barRef} style={barStyle}>
            {leftBarWidth ? <BaseScrollBar width={leftBarWidth} /> : null}
            {width ? <BaseScrollBar
                main
                width={width}
                setBarVisible={setBarVisible}
                modifyState={modifyState}
                scrollUtility={scrollUtility}
            /> : null}
            {rightBarWidth ? <BaseScrollBar width={rightBarWidth + rightBarWidthPlus} /> : null}
            {needSpacer ? <div className={`${cssPrefix}-scroll-bar_spacer`} style={{ width: scrollSize, height: scrollSize }}></div> : null}
        </div>
    )
}
export default SimulateScrollBar;